new Vue({
    el:'.static',
    data:{
        isActive:true,
        hasError:false
    }
})

//1.绑定字面量对象
var vm = new Vue({
    el:'#app',
    data:{
        message:'hello vue!',
        isActive:true
    }
})

//2.绑定普遍现象;
var vm2 = new Vue({
    el:"#app2",
    data(){
    return {
        generalClsObj:{
            message:'hello vue!',
            active:true,
            'text-danger':false
            }
        }
    }
})

var vm3 = new Vue({
    el:"#app3",
    data:{
        isActive:true,
        error: null
    },
    computed:{
        classObject:function(){
            return {
                active:this.isActive && !this.error,
                'text-danger':this.error && this.error.type === 'fatal'
            }
        }
    }
})

var vm4=new Vue({
    el:"#app4",
    data:{
        activeClass:'active',
        errorClass:'text-danger'
    }
})

var vm5=new Vue({
    el:'#app5',
    data:{
        activeColor:'green',
        fontSize:40
    }
})

// Vue.computed('my-component',{
//     template:'<p class="foo bar">Hi</p>'
// })
// HTML将被渲染为:
// <p class="foo bar baz boo">Hi</p>

var vm6=new Vue({
    el:"#app6",
    data:{
        styleObject:{
        color:'red',
        fontSzie:'13px'
        }
    }
})